docs: add s2 non-component hook docs #9106
Open
+3,505
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yihuiliao
commented
Oct 28, 2025
|
Build successful! 🎉 |
yihuiliao
changed the title
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:TabPanels-TabPanels <T extends {}> {
- children?: ReactNode | ({}) => ReactNode
- className?: string = 'react-aria-TabPanels'
- dependencies?: ReadonlyArray<any>
- disabledKeys?: Iterable<Key>
- items?: Iterable<{}>
- style?: CSSProperties
-}/react-aria-components:TabPanelsProps-TabPanelsProps <T> {
- children?: ReactNode | (T) => ReactNode
- className?: string = 'react-aria-TabPanels'
- dependencies?: ReadonlyArray<any>
- disabledKeys?: Iterable<Key>
- items?: Iterable<T>
- style?: CSSProperties
-}/react-aria-components:TabPanelRenderProps TabPanelRenderProps {
- isEntering: boolean
- isExiting: boolean
isFocusVisible: boolean
isFocused: boolean
isInert: boolean
state: TabListState<unknown>@react-aria/utils/@react-aria/utils:useUpdateEffect useUpdateEffect {
- cb: EffectCallback
+ effect: EffectCallback
dependencies: Array<any>
returnVal: undefined
}@react-spectrum/s2/@react-spectrum/s2:Calendar Calendar <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
+ children?: ChildrenOrFunction<CalendarRenderProps>
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: DateValue | null
errorMessage?: ReactNode
focusedValue?: DateValue | null
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (MappedDateValue<DateValue>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
styles?: StylesProp
value?: DateValue | null
visibleMonths?: number = 1
}/@react-spectrum/s2:MenuSection MenuSection <T extends {}> {
aria-label?: string
- children?: ReactNode
+ children?: ReactNode | (T) => ReactElement
+ className?: string = 'react-aria-MenuSection'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: Key
items?: Iterable<T>
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
+ style?: CSSProperties
value?: T
}/@react-spectrum/s2:Popover Popover {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
- children?: ReactNode
+ children?: ChildrenOrFunction<PopoverRenderProps>
containerPadding?: number = 12
crossOffset?: number = 0
hideArrow?: boolean = false
id?: string
offset?: number = 8
onOpenChange?: (boolean) => void
padding?: 'default' | 'none' = 'default'
placement?: Placement = 'bottom'
role?: 'dialog' | 'alertdialog' = 'dialog'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
styles?: PopoverStylesProp
triggerRef?: RefObject<Element | null>
}/@react-spectrum/s2:RangeCalendar RangeCalendar <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
+ children?: ChildrenOrFunction<RangeCalendarRenderProps>
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
errorMessage?: ReactNode
focusedValue?: DateValue | null
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
styles?: StylesProp
value?: RangeValue<DateValue> | null
visibleMonths?: number = 1
}/@react-spectrum/s2:Cell Cell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
showDivider?: boolean
+ style?: StyleOrFunction<CellRenderProps>
textValue?: string
}/@react-spectrum/s2:Column Column {
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
+ className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
menuItems?: ReactNode
minWidth?: ColumnStaticSize | null
showDivider?: boolean
+ style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:EditableCell EditableCell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
isSaving?: boolean
+ onCancel: () => void
onSubmit: () => void
renderEditing: () => ReactNode
showDivider?: boolean
+ style?: StyleOrFunction<CellRenderProps>
textValue?: string
}/@react-spectrum/s2:UNSTABLE_ToastContainer UNSTABLE_ToastContainer {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
placement?: ToastPlacement = "bottom"
+ style?: StyleOrFunction<ToastRegionRenderProps<T>>
}/@react-spectrum/s2:CalendarProps CalendarProps <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
+ children?: ChildrenOrFunction<CalendarRenderProps>
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: DateValue | null
errorMessage?: ReactNode
focusedValue?: DateValue | null
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (MappedDateValue<DateValue>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
styles?: StylesProp
value?: DateValue | null
visibleMonths?: number = 1
}/@react-spectrum/s2:MenuSectionProps MenuSectionProps <T extends {}> {
aria-label?: string
- children?: ReactNode
+ children?: ReactNode | (T) => ReactElement
+ className?: string = 'react-aria-MenuSection'
defaultSelectedKeys?: 'all' | Iterable<Key>
dependencies?: ReadonlyArray<any>
disabledKeys?: Iterable<Key>
disallowEmptySelection?: boolean
id?: Key
items?: Iterable<T>
onSelectionChange?: (Selection) => void
selectedKeys?: 'all' | Iterable<Key>
selectionMode?: SelectionMode
+ style?: CSSProperties
value?: T
}/@react-spectrum/s2:PopoverProps PopoverProps {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
arrowRef?: RefObject<Element | null>
boundaryElement?: Element = document.body
children?: ChildrenOrFunction<PopoverRenderProps>
+ className?: ClassNameOrFunction<PopoverRenderProps> = 'react-aria-Popover'
containerPadding?: number = 12
crossOffset?: number = 0
defaultOpen?: boolean
hideArrow?: boolean = false
isEntering?: boolean
isExiting?: boolean
isOpen?: boolean
maxHeight?: number
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
scrollRef?: RefObject<Element | null> = overlayRef
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
+ style?: StyleOrFunction<PopoverRenderProps>
styles?: StyleString
trigger?: string
triggerRef?: RefObject<Element | null>
}/@react-spectrum/s2:RangeCalendarProps RangeCalendarProps <T extends DateValue> {
UNSAFE_className?: UnsafeClassName
UNSAFE_style?: CSSProperties
allowsNonContiguousRanges?: boolean
aria-describedby?: string
aria-details?: string
aria-label?: string
aria-labelledby?: string
autoFocus?: boolean = false
+ children?: ChildrenOrFunction<RangeCalendarRenderProps>
createCalendar?: (CalendarIdentifier) => Calendar
defaultFocusedValue?: DateValue | null
defaultValue?: RangeValue<DateValue> | null
errorMessage?: ReactNode
focusedValue?: DateValue | null
id?: string
isDateUnavailable?: (DateValue) => boolean
isDisabled?: boolean = false
isInvalid?: boolean
isReadOnly?: boolean = false
maxValue?: DateValue | null
minValue?: DateValue | null
onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
onFocusChange?: (CalendarDate) => void
pageBehavior?: PageBehavior = visible
selectionAlignment?: 'start' | 'center' | 'end' = 'center'
slot?: string | null
styles?: StylesProp
value?: RangeValue<DateValue> | null
visibleMonths?: number = 1
}/@react-spectrum/s2:CellProps CellProps {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
+ className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
showDivider?: boolean
+ style?: StyleOrFunction<CellRenderProps>
textValue?: string
}/@react-spectrum/s2:ColumnProps ColumnProps {
align?: 'start' | 'center' | 'end' = 'start'
allowsResizing?: boolean
allowsSorting?: boolean
children: ReactNode
+ className?: ClassNameOrFunction<ColumnRenderProps> = 'react-aria-Column'
defaultWidth?: ColumnSize | null
id?: Key
isRowHeader?: boolean
maxWidth?: ColumnStaticSize | null
menuItems?: ReactNode
minWidth?: ColumnStaticSize | null
showDivider?: boolean
+ style?: StyleOrFunction<ColumnRenderProps>
textValue?: string
width?: ColumnSize | null
}/@react-spectrum/s2:ToastContainerProps ToastContainerProps {
aria-describedby?: string
aria-details?: string
aria-label?: string = "Notifications"
aria-labelledby?: string
+ className?: ClassNameOrFunction<ToastRegionRenderProps<T>> = 'react-aria-ToastRegion'
placement?: ToastPlacement = "bottom"
+ style?: StyleOrFunction<ToastRegionRenderProps<T>>
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
some things to note/questions:
✅ Pull Request Checklist:
📝 Test Instructions:
test all the examples in the non-component hook docs and make sure it works
🧢 Your Project: